<template>
    <div class="default-table-detail-container">
        <BaseTableInfo v-model="baseTableInfoModel" />
    </div>
</template>

<script lang="tsx" setup>

import { useEnumList } from '~/src/utils/useEnumList';
import StaffClockApi from '/@/api/webPath/StaffClockApi.ts';

    const props = defineProps({
        modelValue: {

        }
    })
    const route = useRouter()
    const clockTypeEnumList = useEnumList("ClockType")

    const baseTableInfoModel = ref({
        columnCount: 3,
        autoFit: false,
        columnWidth: '300px',
        labelWidth: '100px',
        title: '基本信息',
        modelData: {},
        itemList: [
          {
              title: '',
            items: [   //渲染样式区域  通过key ===model 中的值
                        //                                   {
                        // label: "id",
                        //                               field: "id",
                        //                         },
                                                                                                  {
                        label: "人员名称",
                                                      field: "staffName",
                                                },
                                                                                                  {
                        label: "人员id",
                                                      field: "staffId",
                                                },
                                                                                                  {
                        label: "打卡类型",
                                                      field: "clockType",
                                                      fieldFormat: "tag",
                                                        // valueMap:[
                                                        //     {
                                                        //         value:"in",
                                                        //         label: "上班",
                                                        //         type: "primary"
                                                        //     },
                                                        //     {
                                                        //         value:"in",
                                                        //         label: "下班",
                                                        //         type: "success"
                                                        //     }
                                                        // ]
                                                        valueMap: clockTypeEnumList
                                                },
                                                                                                  {
                        label: "打卡时间",
                                                      field: "clockTime",
                                                },
                                                                                                  {
                        label: "排序",
                                                      field: "sort",
                                                },
                                                                                                                                                                                  {
                        label: "创建时间",
                                                      field: "create_time",
                                                },
                                                                                                  {
                        label: "更新时间",
                                                      field: "update_time",
                                                },
                        //                                                                                                                                                           {
                        // label: "所属公司",
                        //                               field: "companyId",
                        //                         }                                                
                                            ]
          }
        ],
        buttons: [   //标题操作区域
           // {
             //   name: "更多",
              //  buttonClass: 'danger',
               // width: 100,
               // click: (any: object) => {   //暴露的方法钩子
                 // $baseMessage("这里执行业务", 'success', 'vab-hey-message-success');
                //},
            //},


        ]
    })

    onMounted(async () => {
         //初始化数据model
        const { data } = await StaffClockApi.getDetail({
                staffClockId: props.modelValue.query.staffClockId   //从路由中获取参数
        })
        baseTableInfoModel.value.modelData = data;





    })
</script>

<style lang="scss" scoped>
    .default-table-detail-container {
        :deep() {
            .el-form--inline {
                .el-form-item {
                    margin-right: 10px;
                }
            }

            .el-descriptions__label {
                min-width: 80px !important;
                text-align: right;
            }
        }
    }
</style>
